<template>
  <div class="header">
    <div class="head-logo">
      <a href="/v1/home" target="_blank" title="同福音乐 music.migu.cn"></a>
    </div>
    <div class="head-nav">
      <a href="javascript:;" class="light-dark" @click="lightClick"></a>
      <div class="nav-user">
        <User :data="userData"></User>
      </div>
    </div>
  </div>
</template>

<script>
import User from "@/components/Head/User"
import userData from '@/data/head/user'
import {reactive,toRefs} from 'vue'
export default {
    name:"Header",
    components:{
        User
    },
    emits: ["lightClick"],
    setup(props,{emit}){
        const state = reactive({
            isLightPlayer:false
        })
        const lightClick = ()=>{
            state.isLightPlayer = !state.isLightPlayer;
            emit('lightClick',state.isLightPlayer);
        }
        return{
            userData,
            lightClick,
        }
    }
}

</script>

<style lang='scss'>
.header {
  width: 100%;
  height: 70px;
  position: relative;

  .head-logo {
    float: left;
    width: 115px;
    height: 43px;
    margin: 23px 40px 0 46px;
    a {
      display: block;
      height: 100%;
      background: url("../../assets/images/Player/logo.png");
      background-size: 100% 100%;
    }
  }
  .head-nav {
    float: right;
    margin-top: 23px;

    .light-dark {
      width: 28px;
      height: 28px;
      margin: 10px 60px 0 0;
      float: left;
      background: url("../../assets/images/Player/moon.png") no-repeat;
    }

    .nav-user {
      float: right;
      margin-right: 60px;
    }
  }
}
</style>
